<template>
    <div v-if="infoobj" class="detail">
        <!-- 面包屑 -->
        <DetailBrand :category="infoobj.categories" :name="infoobj.name"></DetailBrand>
        <!-- 商品基本信息区 -->
        <div class="goods-info">
            <div class="media">
                <goodsImage :imgarr="infoobj.mainPictures" />
                <goodsSales></goodsSales>
            </div>
            <div class="spec">
                <goodsName :infoobj="infoobj" :skuobj="skuobj"></goodsName>
                <goodssku :specs="infoobj.specs" :skus="infoobj.skus" @send="getSkuData" :infoobj="infoobj" :skuobj="skuobj"></goodssku>
            </div>
        </div>
        <!-- 商品推荐 -->
        <GoodsRecommend :relevantlist="relevantlist" :title="title"></GoodsRecommend>
        <!-- 商品详情 -->
        <GoodsParticulars @go2="go2" :details="goodslist.details" :hotlist1="hotlist1" :hotlist2="hotlist2"
            :evaluatelist="evaluatelist" :evaluatelist2="evaluatelist2"></GoodsParticulars>
        <!-- 注意事项 -->
        <goodsAttention></goodsAttention>
    </div>
</template>


<script>
import DetailBrand from '@/components/Detail/DetailBrand.vue'
import { getDetail, getgoods, gethot } from '@/Api/detail'
import { getRelevant } from '@/Api/detail'
import goodsImage from './goodsImage.vue'
import goodsSales from './GoodsSales.vue'
import goodsName from './GoodsName.vue'
import GoodsRecommend from "@/components/Detail/GoodsRecommend.vue";
import goodsAttention from '@/components/Detail/GoodsAttention.vue'
import GoodsParticulars from "@/components/Detail/GoodsParticulars.vue";
import qs from "querystring";
import goodssku from '@/components/Detail/GoodsSku.vue'
export default {
    components: { DetailBrand, goodssku, goodsImage, goodsSales, goodsName, GoodsRecommend, goodsAttention, GoodsParticulars },
    data() {
        return {
            infoobj: {},
            skuobj: {},
            goodslist: [],
            relevantlist: [],
            title:'同城推荐',
            hotlist1: [],
            hotlist2: [],
            evaluatelist: [],
            evaluatelist2: [],
            query: {
                page: 1,
                pageSize: 10,
            },
        }
    },
    methods: {
        async getDetails() {
            let { data: res } = await getDetail(this.$route.query.id)
            this.infoobj = res.result
            // console.log(this.infoobj);
        },
        getSkuData(obj){
            this.skuobj=obj
        },
        async xuan(id) {
            let { data } = await getgoods(id);
            this.goodslist = data.result;
        },
        async xuan1(id) {
            var arr = {
                id: id,
                limit: 16,
            };
            let { data: res } = await getRelevant(arr);
            this.relevantlist = res.result;
        },
        // 评论分类
        async xuan3(id) {
            let { data } = await this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate`);
            this.evaluatelist = data.result;
        },
        async xuan4(id) {
            let { data } = await this.axios.get(`https://mock.boxuegu.com/mock/1175/goods/${id}/evaluate/page?${qs.stringify(this.query)}`);
            this.evaluatelist2 = data.result;
        },
        // 点击评论
        go2() {
            this.xuan3(this.$route.query.id);
            this.xuan4(this.$route.query.id);
        },
        // 热销榜
        async xuan2(id) {
            var arr = {
                id: id,
                limit: 3,
                type: 1,
            };
            let { data: res } = await gethot(arr);
            this.hotlist1 = res.result;
            var arr1 = {
                id: id,
                limit: 3,
                type: 2,
            };
            let { data: res1 } = await gethot(arr1);
            this.hotlist2 = res1.result;
        },
    },
    mounted() {
        this.getDetails()
        this.xuan(this.$route.query.id);
        this.xuan1(this.$route.query.id);
        this.xuan2(this.$route.query.id);

    }
}
</script>

<style lang="scss" scoped>
.detail {
    width: 1240px;
    margin: auto;
}

.basic {
    background: #fff;
}

.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;
    }

    .spec {
        flex: 1;
        padding: 30px 30px 30px 0;
    }
}
</style>